<template>
	<view class="wrap">
		<view class="shopQu">
			<view class="shopList" v-for="(item, index) in flowList" :key="index" @click="singShop(item.id)">
				<u-lazy-load threshold="-450" border-radius="10" :image="item.shopUrl" :index="index"></u-lazy-load>
				<view class="demo-title">
					{{item.title}}
				</view>
				<view class="demo-price">
					{{item.price}}元
				</view>
				<view class="demo-tag">
					<view class="demo-tag-owner">
						{{item.lity.listType}}成新
					</view>
					<view class="demo-tag-text">
						放心购
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			flowList: {
				type: Array,
			}
		},
		data() {
			return {
				loadStatus: 'loadmore',
				list: []
			}
		},
		created() {},
		onLoad() {},
		methods: {
			singShop(index) {
				uni.navigateTo({
					url: '../../pages/shopes/shopXQ?id=' + index
				})
			}
		},
		watch: {

		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	/* 	page {
		background-color: rgb(240, 240, 240);
	} */
</style>

<style lang="scss" scoped>
	.wrap {

		.shopQu {
			// width: calc(100% -30rpx);
			// display: flex;
			// flex-wrap: wrap;
			column-count: 2;
			column-gap: 10rpx;
			padding-bottom: 20rpx;

			.shopList {
				-webkit-column-break-inside: avoid;
				// width: 45%;
				border-radius: 16rpx;
				margin: 0rpx 10rpx 10rpx 10rpx;
				background-color: #ffffff;
				padding: 16rpx 16rpx 16rpx 16rpx;
				position: relative;

				.demo-title {
					font-size: 30rpx;
					margin-top: 5px;
					color: $u-main-color;
				}

				.demo-price {
					font-size: 30rpx;
					color: $u-type-error;
					margin-top: 5px;
				}

				.demo-tag {
					display: flex;
					margin-top: 5px;

					.demo-tag-owner {
						background-color: $u-type-error;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						padding: 4rpx 14rpx;
						border-radius: 50rpx;
						font-size: 20rpx;
						line-height: 1;
					}

					.demo-tag-text {
						border: 1px solid $u-type-primary;
						color: $u-type-primary;
						margin-left: 10px;
						border-radius: 50rpx;
						line-height: 1;
						padding: 4rpx 14rpx;
						display: flex;
						align-items: center;
						border-radius: 50rpx;
						font-size: 20rpx;
					}
				}
			}
		}

	}
</style>
